<template>
  <div>
    <ele-pro-table
      ref="table"
      size="mini"
      :columns="columns"
      :datasource="datasource"
      :selection.sync="selection"
      :need-page="true"
      :hideOnSinglePage="false"
    >
      <!--头部按钮-->
      <template v-slot:toolbar>
        <div class="btn-class">
          <el-button
            size="small"
            type="primary"
            icon="el-icon-plus"
            class="ele-btn-icon"
            @click="newCard">
            新建
          </el-button>
          <el-button
            size="small"
            type="danger"
            icon="el-icon-delete"
            class="ele-btn-icon"
            @click="delCardAll">
            删除
          </el-button>
        </div>
      </template>
      <template v-slot:days="{ row }">
        <div>{{row.packageDays}}天</div>
      </template>

      <!--操作-->
      <template v-slot:action="{ row }">
        <div class="flex-around">
          <el-link
            type="primary"
            :underline="false"
            @click.stop="edit(row)"
          >
            编辑
          </el-link>
          <el-link
            type="danger"
            :underline="false"
            @click.stop="delSingle(row)"
          >
            删除
          </el-link>
        </div>
      </template>
    </ele-pro-table>
    <new-card ref="card" :visible.sync="addVisbile" @load="reload"></new-card>
  </div>
</template>

<script>
  import NewCard from "@/views/lncomingManagement/cameraPackage/components/new-card";
  import {queryCamera, delCamera} from "@/api/lncomingManagement/cameraPackage"
  export default {
    name: "table-list",
    components: {NewCard},
    props: {
        form:Object
    },
    data() {
      return {
        // 表格选中数据
        selection: [],
        addVisbile:false,  // 新增套餐
        columns: [
          {
            columnKey: 'selection',
            type: 'selection',
            width: 45,
            align: 'center'
          },
          /*{
            columnKey: 'index',
            type: 'index',
            width: 140,
            align: 'center',
            fixed: 'left',
            label: '排序值'
          },*/
          {
            prop: 'packageName',
            label: '套餐名称',
            align: 'center',
            showOverflowTooltip: true,
          },
          {
            prop: 'packageDays',
            label: '套餐天数',
            align: 'center',
            showOverflowTooltip: true,
            slot: 'days',
          },
          {
            prop: 'packagePrice',
            label: '套餐价格(元)',
            align: 'center',
            showOverflowTooltip: true,
          },
          {
            prop: 'createTime',
            label: '创建时间',
            align: 'center',
            showOverflowTooltip: true,
          },
          {
            label: '操作',
            columnKey: 'action',
            align: 'center',
            resizable: false,
            slot: 'action',
            hideInSetting: true,
            showOverflowTooltip: true,
            fixed: 'right'
          }
          ]
      };
    },
    methods: {
      // 新建套餐
      newCard(){
        this.addVisbile=true
        let cardData={}
        this.$nextTick(()=>{
          this.$refs['card'].show(cardData)
        })
      },
      // 编辑套餐
      edit(row){
        console.log("row",row)
        this.addVisbile=true
        this.$nextTick(()=>{
          this.$refs['card'].show(row) //单列套餐数据
        })
      },
      // 删除套餐（多选）
      delCardAll(){
        if (!this.selection.length) {
          // 请选择需要操作的数据
          this.$message.error('请选择数据');
          return;
        }
        var ids=this.selection.map(item => {
          return item.id
        })
        console.log('删除点击事件his.selection===', this.selection ,'ids',ids)
        this.delCard(ids)
      },
      /* 删除（单个） */
      delSingle(row) {
        let ids=[]
        ids.push(row.id)
        console.log("ids====",ids)
        this.delCard(ids)
      },
      // 删除套餐
      delCard(ids){
        this.$confirm('此操作将永久删除该套餐, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          delCamera({
            ids:ids
          })
            .then((data) => {
              // 查询套餐
              this.reload()
              this.$message.success('删除成功!');
            })
            .catch((e) => {
              this.$message.error(e);
            });
        }).catch(() => {
          this.$message.info('已取消删除');
        });
      },
      /* 刷新————表格数据源 */
      datasource({ page, limit, where, order }) {
        return queryCamera({ ...where, ...order, page, limit, ...this.form });
      },
      /* 刷新表格 */
      reload(where) {
        this.$refs.table.reload({ page: 1, where: where });
      },
    },
    watch: {

    }
  };
</script>

<style scoped lang="less">

</style>
